<template>
    <div id="index">
        <div class="row">
            <div class="col-5 left">
                <router-link to="/gmmp">
                    <div class="container swiper-container">
                        <div class="wrapper swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="wd">当日门票</div>
                            </div>
                            <div class="swiper-slide">
                                <img src="../imgs/微信图片_20190311171044.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </router-link>
                <router-link :to="{path: '/wzhd', query: {jq: this.jq}}">
                    <div class="container swiper-container">
                        <div class="wrapper swiper-wrapper">
                            <div class="swiper-slide">
                                <div class=" wd">玩转横店</div>
                            </div>
                            <div class="swiper-slide">
                                <img src="../imgs/微信图片_20190311171051.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </router-link>
                <a href="#">
                    <div class="container swiper-container">
                        <div class="wrapper swiper-wrapper">
                            <div class="swiper-slide">
                                <div class=" wd">酒景套餐</div>
                            </div>
                            <div class="swiper-slide">
                                <img src="../imgs/微信图片_20190311171055.jpg" alt="">
                            </div>
                        </div>

                    </div>
                </a>
                <a :href="this.jtglUrl">
                    <div class="container swiper-container">
                        <div class="wrapper swiper-wrapper">
                            <div class="swiper-slide">
                                <div class=" wd">交通攻略</div>
                            </div>
                            <div class="swiper-slide">
                                <img src="../imgs/jtgl.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-7 right">
                <a :href="jmUrl">
                    <div class="container swiper-container">
                        <div class="wrapper1 swiper-wrapper">
                            <div class="swiper-slide1">
                                <div class=" wd">节目时间</div>
                            </div>
                            <div class="swiper-slide1">
                                <img src="../imgs/b3.jpg">
                            </div>
                        </div>

                    </div>
                </a>
                <a :href="jzUrl">
                    <div class="container swiper-container">
                        <div class="wrapper1 swiper-wrapper">
                            <div class="swiper-slide1">
                                <div class=" wd">剧组动态</div>
                            </div>
                            <div class="swiper-slide1">
                                <img src="../imgs/b2.jpg">
                            </div>
                        </div>


                    </div>
                </a>
                <router-link to="/yyx">
                    <div class="container swiper-container">
                        <div class="wrapper1 swiper-wrapper">
                            <div class="swiper-slide1">
                                <div class=" wd">演艺秀</div>
                            </div>
                            <div class="swiper-slide1">
                                <img src="../imgs/b1.jpg">
                            </div>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    // import Swiper from 'swiper'
    // import 'swiper/dist/css/swiper.min.css'
    export default {
        name: "index.vue",
        data(){
            return {
                jq:'',
                jjUrl: '',
                jmUrl: '',
                jzUrl: '',
                yyUrl: '',
                wzhdUrl: '',
                jtglUrl: '',
                imgUrl: [
                    '../imgs/微信图片_20190311171044.jpg',
                    '../imgs/微信图片_20190311171051.jpg',
                    '../imgs/微信图片_20190311171055.jpg'
                ],
            }
        },
        mounted() {
            // this.autoBack();
            this.getUrl();
            // new Swiper('.swiper-container', {
            //     autoplay: true,
            // })
        },
        methods: {
            getUrlParam: function(name) {
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                let r = window.location.search.trim().substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                else return "";
            },
            autoBack: function () {
                let _this = this;
                let maxTime = 20;
                document.body.addEventListener('click', function () {
                    maxTime = 20;
                });
                setInterval(function(){
                    maxTime--;
                    if(maxTime <= 0) {
                        window.location.href = `http://z.hengdianworld.com/jqdp?jq=${_this.jq}#/`;
                    }
                }, 1000)
            },
            getUrl: function () {
                this.jq = this.getUrlParam('jq');
                this.jjUrl = `http://e.hengdianworld.com/yd_tc.aspx?jq=${this.jq}`;
                this.jmUrl = `https://hdwechat.hengdianworld.com/zoneshow/showtodaydetail?jq=${this.jq}`;
                this.jzUrl = `https://hdwechat.hengdianworld.com/article/articledetail?id=38&jq=${this.jq}`;
                this.yyUrl = `http://m.hengdianworld.com/info_yyx.aspx?jq=${this.jq}`;
                this.jtglUrl = `http://m.hengdianworld.com/Traffic.aspx?wxnumber=o2e-YuJWzBeVroMIN56zoV5hZS_E&jq=${this.jq}`;
                this.wzhdUrl = `http://m.hengdianworld.com/info_Raiders.aspx?wxnumber=o2e-YuJWzBeVroMIN56zoV5hZS_E&jq=${this.jq}`;
            }
        },

    }
</script>

<style scoped>
    #index {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .wrapper {
        width: calc(4.25rem*2);
        overflow: hidden;
        animation: switch 5s linear  infinite alternate;
    }
    .swiper-slide{
        width: 4.25rem;
        height: 4.25rem;
        float: left;
        position: relative;
    }
    .wrapper1 {
        width: calc(5.8rem*2);
        animation: switch1 5s linear infinite alternate;
    }
    .swiper-slide1 {
        width: 5.8rem;
        height: 5.8rem;
        float: left;
        position: relative;
    }

    .wd{
        font-size: .5rem;
        color:#eee;
        position: absolute;
        left:10%;
        bottom: 10%;
    }


    /*.right img{width: 5.8rem;}*/
    /*.left img{width: 4.25rem;}*/

    .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .swiper-slide1 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    @keyframes switch {
        0%, 45% {
            margin-left: 0;
        }
        50%, 100% {
            margin-left: -4.25rem;
        }

    }
    @keyframes switch1 {
        0%, 45% {
            margin-left: 0;
        }
        50%, 100% {
            margin-left: -5.8rem;
        }
    }
</style>